<template>
  <div class="view-container workOvertimeList">
    <header class="view-header">
      <div class="header-container">
        <div class="header-title">
          <i class="el-icon-s-grid"></i>
          <span>加班审批</span>
        </div>
        <div class="header-form">

          <!--搜索-->
          <!--头部搜索  -->
          <el-form :inline="true" :model="pageuser" class="demo-form-inline">
            <el-form-item label="请假人名">
              <el-input v-model="pageuser.name" placeholder="请假人名"></el-input>
            </el-form-item>


            <el-form-item label="状态">
              <el-select v-model="pageuser.letterState" placeholder="状态">
                <el-option
                  v-for="item in seleData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled">
                </el-option>
              </el-select>
            </el-form-item>


            <el-form-item>
              <el-button plain type="primary" @click="fetchData">查询</el-button>
            </el-form-item>
          </el-form>

        </div>
      </div>
    </header>

    <section>
      <el-table
        ref="table"
        :data="tableData"
        border
        stripe
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
      >
        <el-table-column type="selection" align="center"/>
        <el-table-column prop="jiaBanRenName" label="申请人" align="center" sortable/>
        <el-table-column prop="jiaBanYuanYin" label="事由" align="left" width="450" sortable>
          <template slot-scope="s">
            <el-link @click="showDetail(s.row.jiaBanId)">{{s.row.jiaBanYuanYin}}</el-link>
          </template>
        </el-table-column>
        <el-table-column sortable prop="startTime" label="开始时间" align="center"/>
        <el-table-column sortable prop="endTime" label="结束时间" align="center"/>
        <el-table-column sortable prop="stateName" label="状态" align="center">
          <template slot-scope="s">
            <el-tag :type="switchType(s.row.stateName)">{{s.row.stateName}}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </section>
  </div>
</template>

<script>
  import jiaBanAPI from '@/api/workOvertime/workOvertime'
  export default {
    name: 'JiaBanApprovalList',
    data() {
      return {
        tableData: [],
        multipleSelected: [],
        delLoading: false,
        pageuser:[{
          letterState:'',
          name:'',
          pageIndex:1,
          pageSize:5

        }],

        seleData:[],
        totals:0,


        jiaBan: {
          auditorIdList: [
            0
          ],

          endTime: "",
          jiaBanRenId: 0,
          jiaBanYuanYin: "",
          startTime: "",
          jiaBanId:'',
          jiaBanRenName:'',
          stateName:''
        },

      }
    },
    created() {
      this.fetchData()
      this.selcAllds()
    },
    computed: {
      isBatchesDel() {
        return this.multipleSelected.length > 1 ? '批量删除' : '删除'
      }
    },
    methods: {
      showDetail(id){
        this.$router.push('/work-jiaban/approval-detail/'+id+'/'+true)
      },
      doApproval(){
        if(!this.multipleSelected.length){
          this.$message.info('请选择要审批的行')
        }else{
          this.showDetail(this.multipleSelected[0])
        }
      },
      switchType(str){
        let type = ''
        switch (str) {
          case '审批中':
            type = 'default'
            break
          case '已完成':
            type = 'success'
            break
        }
        return type
      },
      handleRowClick(row, column, event) {
        this.$refs['table'].toggleRowSelection(row)
      },
      fetchData() {
        jiaBanAPI.auditLists(this.page).then(res => {
          this.tableData = res.records
          this.totals = res.total
        })
      },




      selcAllds(){
        jiaBanAPI.seleAlls().then(res=>{
          this.seleData = res.result
          console.log(this.seleData)
        })
      },




      del() {
        if (this.multipleSelected.length === 0) {
          this.$message.warning('请选择要删除的行')
          return
        }
        if (this.delLoading) {
          return
        }
        this.$confirm('确定删除吗', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delLoading = true
          const promise = jiaBanAPI.delete(this.multipleSelected)
          promise.then(res => {
            this.delLoading = false
            this.$message.success('删除成功')
            if (this.multipleSelected.length === this.tableData.length) {
              this.page.index = --this.page.index === 0 ? 1 : this.page.index
            }
            this.fetchData()
          }).catch(err => {
            this.delLoading = false
            console.log(err)
          })
        }).catch(() => {
        })
      },
      handleSelectionChange(arr) {
        this.multipleSelected = []
        for (const val of arr) {
          this.multipleSelected.push(val.jiaBanId)
        }
      },
      handleCommand(command) {
        switch (command) {
          case 'edit':
            this.edit()
            break;
          case 'del':
            this.del()
            break;
          case 'refresh':
            this.refresh()
            break
          default:
        }
      },
      refresh() {
        location.reload()
      },
      handleSizeChange(val) {
        this.page.size = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.page.index = val
        this.fetchData()
      },
    }
  }
</script>

<style lang="scss">
</style>

